<template>
  <div class="top">
    <MyHeader>
      <span class="iconfont icon-caidan"></span>
    </MyHeader>

    <MyNav />
  </div>

  <!-- <MyList /> -->
  <div class="content">
    <RouterView v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </RouterView>
  </div>
</template>

<script>
// 引入头部组件
import MyHeader from "./components/MyHeader.vue";
// 引入导航组件
import MyNav from "./components/MyNav.vue";
// import MyList from "./components/MyList.vue";

export default {
  components: {
    MyHeader,
    MyNav,
    // MyList,
  },
};
</script>

<style lang="less" scoped>
// @import url("../../../assets/css/var.less");

.top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}
.iconfont {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: @xl-font;
}

.content {
  position: fixed;
  top: 96px;
  left: 0;
  right: 0;
  bottom: 50px;
}

/* 下面我们会解释这些 class 是做什么的 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  // transform: translateX(100%);
}
</style>
